<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <el-descriptions title="用户信息" border :column="3" style="margin: 15px">
            <el-descriptions-item label="医院名称">{{hospital.hosname}}</el-descriptions-item>
            <el-descriptions-item label="医院编号">{{hospital.hoscode}}</el-descriptions-item>
            <el-descriptions-item label="医院类型">{{hospital.hostype}}</el-descriptions-item>
            <el-descriptions-item label="医院logo">
                <img :src="'data:image/jpg;base64,'+hospital.logoData"
                        style="width: 120px;height: 100px;">
            </el-descriptions-item>
            <el-descriptions-item label="地址" :span="2">{{hospital.address}}</el-descriptions-item>
            <el-descriptions-item label="坐车地址" :span="3">{{hospital.route}}</el-descriptions-item>
            <el-descriptions-item label="医院简介" :span="3">{{hospital.intro}}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions title="预约规则" border :column="3" style="margin: 15px">
            <el-descriptions-item label="预约周期">{{hospital.bookingRule.cycle}}</el-descriptions-item>
            <el-descriptions-item label="放号时间">{{hospital.bookingRule.releaseTime}}</el-descriptions-item>
            <el-descriptions-item label="停挂时间">{{hospital.bookingRule.stopTime}}</el-descriptions-item>
            <el-descriptions-item label="退号截止天数">{{hospital.bookingRule.quitDay == 0?'预约当天':'预约前一天'}}</el-descriptions-item>
            <el-descriptions-item label="取号地点">{{hospital.bookingRule.fetchAddress}}</el-descriptions-item>
        </el-descriptions>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            hospital: {},
        },
        methods: {
            showHospital () {
                // 取出条件
                let obj = {
                    hoscode : sessionStorage.getItem("hoscode"),
                    signKey : sessionStorage.getItem("signKey")
                }
                axios.post(`/hospitalSet/showHospital`, obj).then( ({data}) => {
                    if (data.code == 200) {
                        this.hospital = data.data
                    } else {
                        this.$message({
                            message: '未查询到信息，可能服务器出小差了',
                            type: 'warning'
                        })
                    }
                }).catch( e => {
                    this.$message.error("查询出错啦，请稍后再试!")
                })
            }
        },
        created () {
            this.showHospital()
        }
    })
</script>
</body>
</html>